<template>
  <div class="page">
    <div class="title">
      {{ title }}
    </div>
    <div class="form">
      <div class="formLeft">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="imageVideoForm"
        >
          <!-- 在选择上传文件夹时 或 审核时登录用户非组长 将图像名称不用填写。 -->
          <el-form-item label="文件名称:">
            <el-input
              v-model="imageVideoForm.fileName"
              :disabled="uploadType == 2 || inputDisabled"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item label="重要程度:" v-show="selectedTabId == 3">
            <el-select
              v-model="imageVideoForm.importanceId"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in importanceIds"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="图像来源:" v-show="selectedTabId == 2">
            <el-select
              v-model="imageVideoForm.source"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="视频来源:" v-show="selectedTabId == 3">
            <el-select
              v-model="imageVideoForm.source"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="视频来源:" v-show="selectedTabId == 3">
            <el-input
              v-model="imageVideoForm.source"
              maxlength="200"
              :disabled="inputDisabled"
            />
          </el-form-item> -->
          <el-form-item label="传感器类型:">
            <el-select
              v-model="imageVideoForm.sensorId"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in sensorTypeList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="添加标签:">
            <div class="target-tree-con">
              <div class="input">
                <tagsGroup
                  :showTagsArr="categoryIds"
                  :tagsClose="!inputDisabled"
                  @tagsDel="tagsDel"
                ></tagsGroup>
              </div>
              <div
                class="treeTags block"
                :class="selectedTabId == 3 ? 'video' : ''"
              >
                <el-tree
                  class="categoryIds-tree"
                  :data="treeTags"
                  node-key="id"
                  :show-checkbox="!inputDisabled"
                  default-expand-all
                  :props="defaultProps"
                  ref="elTree"
                  @check="treeCheck"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="侦察对象:">
            <el-input
              disabled
              v-model="targetTreeCheckedName"
              placeholder="去左侧选择对应目标"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item label="任务名称:">
            <el-input
              v-model="imageVideoForm.taskName"
              maxlength="200"
              :disabled="inputDisabled"
            />
          </el-form-item>
          <el-form-item label="标题:" v-show="selectedTabId == 3">
            <el-input
              v-model="imageVideoForm.videoTitle"
              maxlength="200"
              :disabled="inputDisabled"
            />
          </el-form-item>
          <el-form-item label="描述信息:">
            <el-input
              type="textarea"
              v-model="imageVideoForm.memo"
              maxlength="255"
              :autosize="{ minRows: 2 }"
              :disabled="inputDisabled"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="formRight">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="imageVideoForm"
        >
          <el-form-item label="侦察手段:">
            <el-select
              v-model="imageVideoForm.platformId"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in shotPlatformList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地域名称:" v-show="selectedTabId == 3">
            <el-input
              v-model="imageVideoForm.regionName"
              maxlength="200"
              :disabled="inputDisabled"
            />
          </el-form-item>
          <el-form-item label="视频类别:" v-show="selectedTabId == 3">
            <el-select
              v-model="imageVideoForm.videoType"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in videoTypes"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="视频密级:" v-show="selectedTabId == 3">
            <el-select
              v-model="imageVideoForm.classificationId"
              placeholder="请选择"
              :disabled="inputDisabled"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in secretTypes"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄时间" v-show="selectedTabId == 2">
            <el-date-picker
              v-model="imageVideoForm.shotDate"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy/MM/dd HH:mm:ss"
              value-format="yyyy/MM/dd HH:mm:ss"
              default-time="12:00:00"
              :disabled="inputDisabled"
            />
          </el-form-item>
          <el-form-item label="主题词:" v-show="selectedTabId == 3">
            <el-input
              v-model="imageVideoForm.keywords"
              maxlength="200"
              :disabled="inputDisabled"
            />
          </el-form-item>
          <!-- 采集单位 -->
          <el-form-item label="采集单位:">
            <div class="target-tree-con">
              <div class="input">
                <el-tag type="success" v-show="bdnmTag">{{ bdnmTag }}</el-tag>
                <el-tag
                  type="danger"
                  v-show="wqzbbhTag"
                  style="margin-left: 0.1rem"
                  >{{ wqzbbhTag }}</el-tag
                >
              </div>
              <div
                class="treeTags block"
                :class="selectedTabId == 3 ? 'video' : ''"
              >
                <el-tree
                  class="collectionUnit-tree"
                  default-expand-all
                  :data="collectionUnitTreeTags"
                  node-key="bdnm"
                  :show-checkbox="!inputDisabled"
                  :props="collectionUnitDefaultProps"
                  ref="collectionUnitElTree"
                  @check="collectionUnitTreeCheck"
                  check-strictly
                />
                <div class="arms-div" v-show="showArmsDiv">
                  <el-checkbox-group v-model="wqzbbh">
                    <el-checkbox
                      v-for="item in armsData"
                      :key="item.wqzbbh"
                      :label="item.wqzbbh"
                      @change="wqzbbhChange(item)"
                      >{{ item.mc }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="上传形式:" v-if="!isEdit && selectedTabId == 2">
            <el-radio-group
              v-model="uploadType"
              @change="radioChange"
              :disabled="inputDisabled"
            >
              <el-radio label="1">单个上传</el-radio>
              <el-radio label="2">上传文件夹</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传文件:" class="upload-form-item">
            <el-radio
              v-model="imageVideoForm.isProduct"
              label="0"
              :disabled="inputDisabled"
              >原始数据</el-radio
            >
            <el-radio
              v-model="imageVideoForm.isProduct"
              label="1"
              :disabled="inputDisabled"
              >成果数据</el-radio
            >
          </el-form-item>
          <el-upload
            v-show="uploadType == 1"
            class="upload-demo"
            :action="baseURL"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :data="uploadOtherData"
            :file-list="fileList"
            list-type="picture"
            :accept="uploadAccept"
            :auto-upload="true"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :disabled="inputDisabled"
          >
            <el-button size="small" type="primary">上传</el-button>
          </el-upload>
          <div class="upload-demo" v-show="uploadType == 2">
            <el-button size="small" type="primary" @click="multipleBTN"
              >上传</el-button
            >
            <div class="file-dir flex-center" v-if="fileDirName">
              <span>{{ fileDirName }}</span>
              <em class="el-icon-upload-success el-icon-circle-check" />
            </div>
          </div>
          <el-form-item label="审核结果:" v-show="isAudit">
            <el-radio-group v-model="imageVideoForm.examineType">
              <el-radio :label="2">通过</el-radio>
              <el-radio :label="3">不通过</el-radio>
              <el-radio :label="4" v-show="finalCheck == 1">存疑</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见：" v-show="isAudit">
            <el-select
              v-model="expertMemoItems"
              multiple
              collapse-tags
              @change="expertMemoChange"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in expertMemoOptions"
                :key="index"
                :label="item.memo"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核意见:" v-show="isAudit">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入审核意见"
              v-model="imageVideoForm.expertMemo"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btn flex-center">
      <div
        class="normalize"
        :class="[isNormalized ? 'isNormalized' : '']"
        @click="handleNormalize"
      >
        规范化命名
      </div>
      <div class="confirm" v-if="uploadType == 1" @click="confirm">确认</div>
      <div class="confirm" v-if="uploadType == 2" @click="nextForm">下一步</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import tagsGroup from "@/components/common/tagsGroup.vue";
export default {
  components: { tagsGroup },
  data() {
    return {
      expertMemoOptions: [],
      expertMemoItems: [],
      bdnm: "",
      bdnmTag: "",
      collectionUnitTreeTags: [], // 采集单位树形数据
      sessionFileName: null,
      wqzbbh: [],
      wqzbbhTag: "",
      showArmsDiv: false,
      armsData: [], // 采集单位二级数据
      armsId: "",
      isNormalized: false, // 是否规范化命名
      isEdit: false, // 是否编辑
      isAudit: false, // 是否审核
      title: "",
      labelPosition: "right",
      fakeSelect: null,
      treeTags: [],
      defaultProps: {
        children: "categoryTypeList",
        label: "name",
      },
      collectionUnitDefaultProps: {
        children: "children",
        label: "bdfh",
      },
      uploadFileName: "", // 原始文件名
      imageVideoForm: {
        fileName: "", // 名称
        memo: "",
        taskName: "", // 任务名称
        sensorId: "", // 类型
        regionName: "", // 地域名称
        shotDate: "", // 拍摄时间
        platformId: "", // 平台
        videoTitle: "", // 标题
        text: "",
        source: "",
        realFileUrl: null,
        importanceId: null, // 重要程度
        keywords: null, // 主题词
        videoType: null, // 视屏类别
        classificationId: null,
        isProduct: "0",
        ids: [], // 批量审核ids
        examineType: 2, // 2-通过，3-不通过，4-存疑
        expertMemo: "", // 审核意见
      },
      fileList: [],
      imageSourceList: [],
      sourceList: [],
      sensorTypeList: [],
      shotPlatformList: [],
      importanceIds: [],
      videoTypes: [], // 视屏类别
      secretTypes: [],
      showTagTree: true,
      loading: null,
      fatherIds: [],
      chekedIds: [], //  单选tree
      categoryIds: [],
      item: null, // 路由传递过来的所有参数
      tagsList: [], //标签组列表
      uploadType: "1", // 1,单个上传，2多个上传
      multipleArr: [], // 批量上传返回URL
      fileDirName: "", // 上传后的文件夹名称
      fileRowName: "", //  缓存file.raw.name 用于判断用户有没有输入
      uploadOtherData: null,
    };
  },
  computed: {
    ...mapState({
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
      targetTreeCheckedName(state) {
        return state.app.targetTreeCheckedName;
      },
      targetTreeSingleId(state) {
        return state.app.targetTreeSingleId;
      },
      selectedTabId(state) {
        // 2 时图像     3 是视频
        return state.app.dataTypeTabsId;
      },
      isEmptyForm(state) {
        return state.app.isEmptyForm;
      },
      baseURL() {
        if (this.selectedTabId == 2) {
          return `${window.VUE_APP_BASE_URL}/imageData/uploadImageFile`;
        } else if (this.selectedTabId == 3) {
          return `${window.VUE_APP_BASE_URL}/imageData/uploadVideoFile`;
        }
        return "";
      },
      // 获取用户信息
      user(state) {
        return state.user;
      },
      // 是否可编辑
      inputDisabled() {
        if (this.$route.params.isAudit) {
          // 审核
          if (
            this.user.userRole == 3 &&
            (this.user.roleType == 2 || this.user.roleType == 3)
          ) {
            // 临时用户小组长和组长有权限修改
            return false;
          } else {
            return true;
          }
        }
        if (this.$route.params.isEdit) {
          // 编辑
          return false;
        }
        if (!this.$route.params.isEdit && !this.$route.params.isAudit) {
          // 新增
          return false;
        }
      },
      finalCheck(state) {
        return state.app.finalCheck || 1;
      },
    }),
    uploadAccept() {
      if (this.selectedTabId == 2) {
        return "image/*";
      } else if (this.selectedTabId == 3) {
        return "video/*";
      }
      return "";
    },
  },
  /* beforeDestroy() {
    this.$store.commit("app/setTargetTreeIsSingle", false);
  }, */
  created() {
    if (this.$route.params.isEdit || this.$route.params.isAudit) {
      // item ： 所有回显数据
      this.item = this.$route.params.item;
    }
    this.imageSource();
    this.sensorType();
    this.shotPlatform();
    this.importanceType();
    this.secretType();
    this.categoryAndGroup();
    this.importanceType();
    this.videoType();
    this.secretType();
    this.getCollectionUnit();
    this.getMemo();
  },
  activated() {
    this.getSourceList();
    if (this.isEmptyForm) {
      this.emptyForm();
    }
    // 目标树改为单选
    this.$store.commit("app/setTargetTreeIsSingle", true);
    if (this.$route.params.isEdit || this.$route.params.isAudit) {
      // item ： 所有回显数据
      this.item = this.$route.params.item;
      // 目标树回显
      this.$store.commit("app/setTargetTreeSingleId", this.item.targetType);
      // 目标名称回显--侦察对象
      this.$store.commit("app/setTargetTreeCheckedName", this.item.zzdx);
      this.isEdit = true;
      this.imageVideoForm = Object.assign(this.imageVideoForm, this.item);
      this.imageVideoForm.isProduct = this.imageVideoForm.isProduct + ""; // 数字转字符串

      this.fileList = [];
      this.fileList.push({
        name: this.item.uploadFileName,
        url: this.item.thumbnail,
      });
      // 标签树回显
      this.categoryIds = this.item.categoryTypeList.map((key) => {
        return key.id;
      });
      //  重新设置chekedIds
      this.chekedIds = this.item.categoryTypeList.map((key) => {
        return {
          father: key.groupId,
          son: key.id,
        };
      });
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
        if (this.item.bdnm != null && this.item.bdn != "") {
          this.$refs.collectionUnitElTree.setCheckedKeys([this.item.bdnm]);
        }
      });
      // 设置采集单位tag
      // 设置armsData
      if (this.item.bdnm != null) {
        this.getArmsData(this.collectionUnitTreeTags, this.item.bdnm);
      } else {
        this.armsData = [];
        this.showArmsDiv = false;
      }
    }
    if (this.$route.params.isEdit) {
      this.isAudit = false;
      if (this.selectedTabId == 2) {
        this.title = "图像编辑";
      } else if (this.selectedTabId == 3) {
        this.title = "视频编辑";
      }
    } else if (this.$route.params.isAudit) {
      this.isAudit = this.$route.params.isAudit;
      if (this.selectedTabId == 2) {
        this.title = "图像审核";
      } else if (this.selectedTabId == 3) {
        this.title = "视频审核";
      }
    } else {
      this.isAudit = false;
      if (this.selectedTabId == 2) {
        this.title = "图像新增";
      } else if (this.selectedTabId == 3) {
        this.title = "视频新增";
      }
    }
  },
  mounted() {
    if (this.$route.params.isEdit || this.$route.params.isAudit) {
      this.categoryIds = this.item.categoryTypeList.map((key) => {
        return key.id;
      });
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      });
    }
  },
  beforeCreate() {
    // 防止页面刷新丢失路由参数
    if (!this.$route.params.selectedTabId) {
      this.$router.go(-1);
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path.indexOf("multipleUpload") > -1) {
      next();
    } else {
      this.emptyForm();
      // 目标树改回多选
      this.$store.commit("app/setTargetTreeIsSingle", false);
      // 表单页是否一开始清空所有数据
      this.$store.commit("app/setIsEmptyForm", false);
      next();
    }
    this.$refs.collectionUnitElTree.setCheckedKeys([]);
    this.bdnm = "";
    this.bdnmTag = "";
    this.wqzbbh = [];
    this.wqzbbhTag = "";
  },
  methods: {
    expertMemoChange(value) {
      this.imageVideoForm.expertMemo = "";
      if (value.length > 0) {
        value.forEach((item) => {
          this.imageVideoForm.expertMemo +=
            this.expertMemoOptions[item].memo + " || ";
        });
      }
    },
    async getMemo() {
      this.expertMemoOptions = await this.$api.getMemo();
    },
    getArmsData(data, bdnm) {
      if (data.length > 0) {
        data.forEach((item) => {
          if (item.bdnm == bdnm) {
            this.armsData = item.armsMessage;
            this.bdnmTag = item.bdfh;
            if (this.armsData.length > 0) {
              this.armsData.forEach((i) => {
                if (i.wqzbbh == this.item.wqzbbh) {
                  this.wqzbbhTag = i.mc;
                }
              });
              this.showArmsDiv = true;
              this.$nextTick(() => {
                this.wqzbbh = [this.item.wqzbbh];
              });
            }
            return;
          } else {
            if (item.children != null) {
              this.getArmsData(item.children, bdnm);
            }
          }
        });
      }
    },
    // 获取采集单位
    async getCollectionUnit() {
      await this.$api.getCollectionUnit().then((res) => {
        this.collectionUnitTreeTags = res;
      });
    },
    // 采集单位checkbox点击事件
    collectionUnitTreeCheck(data) {
      // 设置值
      this.$nextTick(() => {
        this.bdnm = data.bdnm;
        this.bdnmTag = data.bdfh;
        this.$refs.collectionUnitElTree.setCheckedKeys([data.bdnm]);
        this.wqzbbh = [];
        this.wqzbbhTag = "";
      });
      if (data.armsMessage.length > 0) {
        this.showArmsDiv = true;
        this.armsData = data.armsMessage;
        // this.armsMessage = data.armsMessage
      } else {
        this.showArmsDiv = true;
        this.armsData = [];
      }
    },
    wqzbbhChange(item) {
      this.wqzbbhTag = item.mc;
      this.wqzbbh = [item.wqzbbh];
    },
    radioChange() {
      if (this.uploadType == 2) {
        this.sessionFileName = this.imageVideoForm.fileName;
        this.imageVideoForm.fileName = "";
      } else {
        this.imageVideoForm.fileName = this.sessionFileName;
      }
    },
    // 清空所有表单
    emptyForm() {
      this.isEdit = false;
      if (this.loading) {
        this.loading.close();
      }
      // 清空所有表单项
      this.imageVideoForm = {
        // 名称
        fileName: "",
        memo: "",
        taskName: "",
        // 类型
        sensorId: "",
        // 地域名称
        regionName: "",
        // 拍摄时间
        shotDate: "",
        // 平台
        platformId: "",
        videoTitle: "", // 标题
        // geographical: "", //国家地区
        // 信息
        text: "",
        source: "",
        realFileUrl: null,
        importanceId: null, // 重要程度
        keywords: null, // 主题词
        videoType: null, // 视屏类别
        classificationId: null,
        isProduct: "0",
      };
      this.fileList = [];
      this.chekedIds = [];
      this.categoryIds = [];
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      });
      this.item = [];
      this.tagsList = [];
      this.fileDirName = "";
      this.multipleArr = []; // 批量上传返回URL
      this.fileDirName = ""; // 上传后的文件夹名称
      this.uploadType = "1"; // 1,单个上传，2多个上传
      // 目标树清空
      this.$store.commit("app/setTargetTreeSingleId", "");
      // 目标名称清空
      this.$store.commit("app/setTargetTreeCheckedName", "");
    },
    handleNormalize() {
      this.$api
        .generatorFileName({
          list: this.categoryIds,
          zzdx: this.targetTreeCheckedName,
          dataType: this.uploadType,
        })
        .then((res) => {
          // 成功
          if (res.indexOf("200") != -1) {
            this.isNormalized = true;
            this.imageVideoForm.fileName = res.split(",")[1];
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
    },
    // 批量上传按钮
    multipleBTN() {
      let fileInput = document.createElement("input");
      fileInput.type = "file";
      document.body.appendChild(fileInput);
      fileInput.setAttribute("accept", "image/*");
      fileInput.id = "fileInput";
      fileInput.style.cssText = "display:none;";
      fileInput.webkitdirectory = true;
      fileInput.click();
      fileInput.addEventListener("change", (e) => {
        let isFilter = false;
        let isBigSize = false;
        let formData = new FormData();
        // 过滤 只能传图片
        e.target.files.forEach((element) => {
          const sizeLimit = element.size / 1024 / 1024 / 1024 < 1; //这里做文件大小限制 1GB!
          if (sizeLimit) {
            if (element.type.indexOf("image") !== -1) {
              formData.append("files", element);
            } else {
              isFilter = true;
            }
          } else {
            isBigSize = true;
          }
        });
        if (isFilter) {
          this.$notify({
            title: "提示",
            message: "已自动过滤该文件夹内非图片文件！",
            type: "success",
          });
        }
        if (isBigSize) {
          this.$notify({
            title: "提示",
            message: "已自动过滤该文件夹内超大文件！",
            type: "success",
          });
        }
        this.loading = this.$loading({
          lock: true,
          text: "努力上传中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$api
          .batchUpload(formData)
          .then((res) => {
            this.loading.close();
            if (res.length == 0) {
              this.$message({
                message: "该文件夹内未匹配到图片文件！",
                type: "warning",
                showClose: true,
              });
              return;
            } else {
              this.$message({
                type: "success",
                message: "上传成功",
                showClose: true,
              });
            }
            this.multipleArr = res;
            this.fileDirName = e.target.files[0].webkitRelativePath.substring(
              0,
              e.target.files[0].webkitRelativePath.indexOf("/")
            );
          })
          .catch(() => {
            this.loading.close();
            this.$confirm("", "上传失败！", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              cancelButtonText: "",
              center: true,
              showCancelButton: false,
            })
              .then(() => {
                // this.$router.go(-1);
              })
              .catch(() => {});
          });
        fileInput.remove();
      });
    },
    // 下一步
    async nextForm() {
      let data = {
        categoryIds: this.categoryIds,
        fileName: this.imageVideoForm.fileName,
        isProduct: this.imageVideoForm.isProduct,
        memo: this.imageVideoForm.memo,
        taskName: this.imageVideoForm.taskName,
        operator: this.user.loginName,
        platformId: this.imageVideoForm.platformId,
        sensorId: this.imageVideoForm.sensorId,
        shotDate: this.imageVideoForm.shotDate,
        source: this.imageVideoForm.source,
        targetType: this.targetTreeSingleId,
        zzdx: this.targetTreeCheckedName,
        // realFileUrl: this.imageVideoForm.realFileUrl,
      };
      if (this.multipleArr.length == 0) {
        this.$notify({
          title: "提示",
          message: "请上传文件！",
          type: "warning",
        });
        return;
      }
      /* if (!this.targetTreeSingleId) {
        this.$notify({
          title: "提示",
          message: "请选择对应目标！",
          type: "warning",
        });
        return;
      } */
      /* 
      // 在选择上传文件夹时将图像名称字段不用填写。
      for (let key in data) {
        if (!data[key] && key == "fileName") {
          this.$notify({
            title: "提示",
            message: "请填写文件名称！",
            type: "warning",
          });
          return;
        }
      } */
      /* 
      // 判断标签组下的标签是不是全部选中
      let allTags = await this.$api.findAllTags();
      for (let i = 0; i < allTags.length; i++) {
        if (this.fatherIds.indexOf(allTags[i].id) === -1) {
          this.$notify({
            title: "提示",
            message: `"请填写标签下的${allTags[i].name}！"`,
            type: "warning",
          });
          return;
        }
      } */
      let query = this.multipleArr.map((element) => {
        let index = element.indexOf("/upload");
        let lastIndex = element.lastIndexOf("/");
        let file_name = "";
        if (this.isNormalized) {
          file_name = this.imageVideoForm.fileName;
        } else {
          file_name = element.substring(lastIndex + 1, element.length);
        }
        let logo = element.substring(index, element.length);
        // tif 转 png
        if (logo.toLowerCase().indexOf(".tif") != -1) {
          logo = logo
            .split("")
            .reverse()
            .join("")
            .replace(/fit./, "gnp.")
            .split("")
            .reverse()
            .join("");
        }
        return {
          ...data,
          realFileUrl: element,
          // 设置每一项的文件名
          fileName: file_name,
          logo: window.VUE_APP_BASE_URL + logo,
        };
      });
      this.$router.push({
        path: "/imagesVideoAddPageTable/multipleUpload",
        query: { query: query },
      });
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    async confirm() {
      if (this.selectedTabId == 2) {
        let data = {
          categoryIds: this.categoryIds,
          fileName: this.imageVideoForm.fileName,
          isProduct: this.imageVideoForm.isProduct,
          memo: this.imageVideoForm.memo,
          taskName: this.imageVideoForm.taskName,
          operator: this.user.loginName,
          platformId: this.imageVideoForm.platformId,
          sensorId: this.imageVideoForm.sensorId,
          shotDate: this.imageVideoForm.shotDate,
          source: this.imageVideoForm.source,
          targetType: this.targetTreeSingleId,
          realFileUrl: this.imageVideoForm.realFileUrl,
          zzdx: this.targetTreeCheckedName,
          uploadFileName: this.uploadFileName,
          expertMemo: this.imageVideoForm.expertMemo,
          examineType: this.imageVideoForm.examineType,
          finalCheck: this.finalCheck,
          bdnm: this.bdnm,
          wqzbbh: this.wqzbbh[0],
        };
        /* 
        // 判断标签组下的标签是不是全部选中
        let allTags = await this.$api.findAllTags();
        for (let i = 0; i < allTags.length; i++) {
          if (this.fatherIds.indexOf(allTags[i].id) === -1) {
            this.$notify({
              title: "提示",
              message: `"请填写标签下的${allTags[i].name}！"`,
              type: "warning",
            });
            return;
          }
        } */
        if (this.$route.params.isEdit) {
          data.id = this.item.id;
          data.ids = [this.item.id];
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$api.updateZCImage(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "编辑成功", {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showCancelButton: false,
                center: true,
              })
                .then(() => {
                  this.$router.go(-1);
                })
                .catch(() => {});
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        } else if (this.$route.params.isAudit) {
          data.id = this.item.id;
          data.ids = [this.item.id];
          // data.isExamine = 2;
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$api.examineZCImage(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "审核成功", {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showCancelButton: false,
                center: true,
              }).then(() => {
                this.$router.go(-1);
              });
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        } else {
          // 新增
          if (!data.realFileUrl) {
            this.$notify({
              title: "提示",
              message: "请上传文件！",
              type: "warning",
            });
            return;
          }
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$api.addZCImage(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "新增成功", {
                confirmButtonText: "完成",
                cancelButtonText: "继续新增",
                showCancelButton: false,
                center: true,
              })
                .then(() => {
                  this.$router.go(-1);
                })
                .catch(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        }
      }
      if (this.selectedTabId == 3) {
        let data = {
          categoryIds: this.categoryIds,
          classificationId: this.imageVideoForm.classificationId,
          fileName: this.imageVideoForm.fileName,
          importanceId: this.imageVideoForm.importanceId,
          isProduct: this.imageVideoForm.isProduct,
          keywords: this.imageVideoForm.keywords,
          memo: this.imageVideoForm.memo,
          taskName: this.imageVideoForm.taskName,
          realFileUrl: this.imageVideoForm.realFileUrl,
          operator: this.user.loginName,
          platformId: this.imageVideoForm.platformId,
          sensorId: this.imageVideoForm.sensorId,
          source: this.imageVideoForm.source,
          targetType: this.targetTreeSingleId,
          videoType: this.imageVideoForm.videoType,
          regionName: this.imageVideoForm.regionName,
          videoTitle: this.imageVideoForm.videoTitle,
          zzdx: this.targetTreeCheckedName,
          uploadFileName: this.uploadFileName,
          expertMemo: this.imageVideoForm.expertMemo,
          examineType: this.imageVideoForm.examineType,
          finalCheck: this.finalCheck,
          bdnm: this.bdnm,
          wqzbbh: this.wqzbbh[0],
        };
        /* 判断标签组下的标签是不是全部选中
        let allTags = await this.$api.findAllTags();
        for (let i = 0; i < allTags.length; i++) {
          if (this.fatherIds.indexOf(allTags[i].id) === -1) {
            this.$notify({
              title: "提示",
              message: `"请填写标签下的${allTags[i].name}！"`,
              type: "warning",
            });
            return;
          }
        } */

        if (this.$route.params.isEdit) {
          data.id = this.item.id;
          data.ids = [this.item.id];
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$api.updateZCVideo(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "编辑成功", {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showCancelButton: false,
                center: true,
              })
                .then(() => {
                  this.$router.go(-1);
                })
                .catch(() => {});
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        } else if (this.$route.params.isAudit) {
          data.id = this.item.id;
          data.ids = [this.item.id];

          // data.isExamine = 2;
          // data.realFileUrl = this.item.fileUrl;
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          this.$api.examineZCVideo(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "审核成功", {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showCancelButton: false,
                center: true,
              })
                .then(() => {
                  this.$router.go(-1);
                })
                .catch(() => {});
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        } else {
          // 新增
          if (!data.realFileUrl) {
            this.$notify({
              title: "提示",
              message: "请上传文件！",
              type: "warning",
            });
            return;
          }
          for (let key in data) {
            if (!data[key] && key == "fileName") {
              this.$notify({
                title: "提示",
                message: "请填写文件名称！",
                type: "warning",
              });
              return;
            }
          }
          this.loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$api.addZCVideo(data).then((res) => {
            this.loading.close();
            // 成功
            if (res.indexOf("200") != -1) {
              this.$confirm("", "新增成功", {
                confirmButtonText: "完成",
                cancelButtonText: "继续新增",
                showCancelButton: false,
                center: true,
              })
                .then(() => {
                  this.$router.go(-1);
                })
                .catch(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          });
        }
      }
    },
    /* 
    // 标签树单选-逻辑优化，
    handleNodeClick(data, checked) {
      if (checked) {
        let sonId = data.id;
        let fatherId = data.groupId;
        //fatherIds父级唯一，chekedIds父级不唯一
        if (this.fatherIds.indexOf(fatherId) == -1) {
          this.fatherIds.push(fatherId);
        }
        this.chekedIds.push({
          father: fatherId,
          son: sonId,
        });
      }
    }, */
    // 标签树单选-逻辑优化，
    treeCheck(data) {
      let sonId = data.id;
      let fatherId = data.groupId;
      if (this.fatherIds.indexOf(fatherId) == -1) {
        this.fatherIds.push(fatherId);
      }
      //chekedIds去重
      let chekedIds = this.chekedIds.filter((j) => j.father != fatherId);
      chekedIds.push({
        father: fatherId,
        son: sonId,
      });
      this.categoryIds = chekedIds.map((key) => key.son);
      this.chekedIds = chekedIds;
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      });
    },
    tagsDel(e) {
      this.categoryIds = this.categoryIds.filter((item) => item != e);
      this.chekedIds = this.chekedIds.filter((i) => i.son != e);
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      });
      this.$api.getTag(e).then((res) => {
        this.fatherIds = this.fatherIds.filter((item) => item != res.groupId);
      });
    },
    handleSuccess(data, file, fileList) {
      this.loading.close();
      if (data.indexOf("500") != -1) {
        this.$message({
          type: "error",
          message: data.split(",")[1],
          showClose: true,
        });
        this.handleRemove(file);
        return;
      }
      this.imageVideoForm.realFileUrl = data;
      this.fileList = fileList.slice(-1);
      this.fileList.forEach((item) => {
        if (item.response.toLowerCase().indexOf(".tif") != -1) {
          item.url = require("@/assets/common/图片.svg");
        }
      });
      // 视频 上传时设置默认图标
      if (this.selectedTabId == 3) {
        this.fileList.forEach((item) => {
          item.url = require("@/assets/common/video.png");
        });
      }
      if (
        !this.imageVideoForm.fileName ||
        this.imageVideoForm.fileName == this.fileRowName
      ) {
        this.imageVideoForm.fileName = file.raw.name;
      }
      this.uploadFileName = file.raw.name;
      // 缓存file.raw.name 用于判断用户有没有输入
      this.fileRowName = file.raw.name;
    },
    beforeUpload(file) {
      const fileType = file.type;
      if (this.selectedTabId == 2) {
        if (fileType.indexOf("image/") == -1) {
          this.$message({
            message: "请上传图片格式的文件",
            type: "warning",
            showClose: true,
          });
          return false;
        }
      } else if (this.selectedTabId == 3) {
        if (fileType.indexOf("video/mp4") == -1) {
          this.$message({
            message: "请上传mp4格式的视频格式的文件",
            type: "warning",
            showClose: true,
          });
          return false;
        }
      }

      const sizeLimit = file.size / 1024 / 1024 / 1024 < 1; //这里做文件大小限制 1GB!
      if (!sizeLimit) {
        this.$message({
          message: "上传文件大小不能超过 1GB!",
          type: "warning",
          showClose: true,
        });
        return false;
      }
      this.loading = this.$loading({
        lock: true,
        text: "努力上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },

    // 移除上传错误的文件
    handleRemove(file) {
      this.fileList.pop(file);
      this.imageVideoForm.realFileUrl = "";
      console.log("handleRemove:::", file, this.fileList);
    },

    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    // 查询标签组及其下标签
    async categoryAndGroup() {
      this.treeTags = await this.$api.categoryAndGroup();
      this.treeTags.forEach((item) => {
        item.categoryTypeList.forEach((key) => {
          key.disabled = false;
        });
      });
    },
    // 查询重要程度
    async importanceType() {
      this.importanceIds = await this.$api.importanceType();
    },
    // 查询重要程度
    async videoType() {
      this.videoTypes = await this.$api.videoType();
    },
    // 查询视频密级
    async secretType() {
      this.secretTypes = await this.$api.secretType();
    },
    // 图像来源类型
    async imageSource() {
      let data = await this.$api.imageSourceDictionary();
      this.imageSourceList = data;
    },
    // 图像来源类型
    async getSourceList() {
      let data = await this.$api.getSourceList();
      this.sourceList = data;
      if (
        data.length > 0 &&
        (this.imageVideoForm.source == "" || this.imageVideoForm.source == null)
      ) {
        data.forEach((item) => {
          if (item.defaultValue == 1) {
            this.imageVideoForm.source = item.name;
          }
        });
      }
    },
    // 传感器类型
    async sensorType() {
      let data = await this.$api.sensorType();
      this.sensorTypeList = data;
    },
    // 查询侦察手段
    async shotPlatform() {
      let data = await this.$api.shotPlatform();
      this.shotPlatformList = data;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.page {
  .title {
    font-size: 0.24rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    margin: 0.1rem 0 0.2rem 0;
  }
  .form {
    width: 100%;
    // height: calc(100vh - 4rem);
    display: flex;
    .formLeft,
    .formRight {
      width: 44%;
      ::v-deep .el-form {
        .el-form-item__label {
          width: 1rem;
          font-size: 0.16rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
        .el-select {
          width: 100%;
        }
        .el-input__inner {
          background: #0355a4 !important;
          border: 1px solid #144f87;
          border-radius: 5px;
          color: #ffffff;
        }
        .el-textarea__inner {
          height: 1rem;
          background: #144f87;
          border: 1px solid #144f87;
          border-radius: 5px;
          color: #ffffff;
        }
        .el-input__count {
          background: #144f87 !important;
        }
        .el-form-item {
          margin-bottom: 0.2rem;
        }
        .upload-form-item {
          width: 80%;
          position: relative;
          z-index: 200;
        }
        .upload-demo {
          // display: flex;
          // flex-direction: row;
          // justify-content: flex-start;
          // align-items: flex-end;
          position: relative;
          z-index: 100;
          width: 100%;
          text-align: right;
          margin-top: -55px;
          .file-dir {
            margin-top: 0.2rem;
            justify-content: flex-end;
            span {
              margin-right: 0.2rem;
              text-decoration: underline;
            }
          }
        }
        ::v-deep .el-upload {
          .el-button {
            margin-bottom: 0.2rem;
          }
        }
        // margin-left: 60%;
        .el-radio {
          line-height: 0.4rem;
          margin-left: 0.1rem;
        }
        .el-upload-list__item {
          width: 80%;
          margin-left: 20%;
        }
      }
    }
    .formRight {
      margin-left: 8%;
    }
  }
}
.tags {
  width: 100%;
  height: 5vh;
  background: #0355a4 !important;
  border: 1px solid #144f87;
  border-radius: 5px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  position: relative;
  .tagList {
    width: 80%;
    height: 100%;
  }
  .selected {
    width: 0.12rem;
    margin-top: 2.5%;
    margin-right: 14px;
    img {
      cursor: pointer;
    }
  }
  .selectTree {
    width: 100%;
    height: 2rem;
    position: absolute;
    z-index: 100;
    top: 100%;
    background: #0355a4 !important;
    border-radius: 0px 0px 5px 5px;
  }
}
.btn {
  margin: 0 auto;
  margin-top: 0.2rem;
  width: 3rem;
  div {
    width: 1.2rem;
    height: 0.38rem;
    background: #62656c;
    border-radius: 5px;
    font-size: 0.14rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    margin: 10px;
    text-align: center;
    line-height: 0.38rem;
  }
  .confirm {
    background: #1890ff;
  }
  .normalize {
    background: #62656c;
    &.isNormalized {
      background: #1890ff;
    }
  }
}
.target-tree-con {
  width: 100%;
  .input {
    margin-bottom: 0.1rem;
    min-height: 0.4rem;
    line-height: 0.4rem;
    outline: none;
    padding: 0 0.15rem;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-size: 0.14rem;
    background: #0355a4 !important;
    border: 1px solid #626262;
    border-radius: 0.05rem;
    color: #ffffff;
  }
}
.treeTags {
  width: 100%;
  background: #0355a4 !important;
  display: flex;
  &.video ::v-deep .el-tree {
    // height: 4.07rem;
  }
  ::v-deep .el-tree {
    @include scrollBar;
    overflow-y: scroll;
    width: 100%;
    height: 2.98rem;
    background: #0355a4 !important;
    border-radius: 0rem 0rem 0.05rem 0.05rem;
    color: #cccccc;
    // margin-top: 0.1rem;
    // background: transparent;
    .el-tree-node:focus > .el-tree-node__content {
      background: #034576; //背景色
    }
    .el-tree-node__content {
      height: 0.3rem;
      &:hover {
        background: #034576;
      }
    }
    .el-tree-node__label {
      font-size: 0.16rem;
      color: #cccccc;
      line-height: 0.25rem;
      letter-spacing: 1px;
    }
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
  .el-tree.collectionUnit-tree {
    width: 50%;
  }
}
::v-deep .el-tree.categoryIds-tree {
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}
/* ::v-deep .el-tree.collectionUnit-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
  display: none;
} */
::v-deep .el-date-editor {
  width: 100%;
}
.arms-div {
  @include scrollBar;
  width: 50%;
  ::v-deep .el-checkbox-group {
    display: flex;
    flex-direction: column;
    .el-checkbox__label {
      color: #fff;
      font-size: 0.15rem;
    }
  }
}
</style>
